FIREWORKS 4.0 - Clase 4

Por Milko A. García Torres

Barras de Navegación:

Vamos a crear ahora una verdadera barra de navegación, con lo que comúnmente se conoce como "menúes pop-up". En la clase 3 ya habíamos creado una muy simple, básica, que llamamos "botonera", pero ahora crearemos una más compleja, un estilo que antes se podía crear sólo mediante programación, y que la nueva versión de Fireworks facilita.
El dilema que nos obliga a crear estas barras es el de la cantidad de ventanas en un sitio. Si yo tengo un botón que me conduce a la sección "Productos", y dentro de la sección Productos, tengo botones o textos que me linkean a 4 productos distintos, ya estuve usando una ventana demás, en este caso, la ventana segunda, que contenía los links que me llevaban a la información misma que buscaba. Para esto es mejor que, de un mismo botón, salga otro pequeño "sub-menú" que contenga los links a esa información. Fíjese en la siguiente página: http://www.elnegrodeneuro.com , y mire con detenimiento el menú de la izquierda.
Desde la clase tres, quedamos en que Ud. había armado esta botonera:
Pues bien, en base a esta misma vamos a definirle nuevos botones. Así que, el primer paso será, tener armada la botonera simple, en este caso, de cuatro botones.
Cuando ya la tenga definida, y con las zonas interactivas a la vista, haga clic sobre el primer botón al que quiera agregar otros, y al aparecer el menú, seleccione la opción Ad Pop-up Menu.

Al hacer clic sobre esa opción aparecerá la siguiente ventana, y habrá que concretar los siguientes pasos:
1- Definir el texto que aparecerá en el botón.
2- Definir el link (absoluto o relativo, interno o externo) al que nos llevará el botón.
3- Definir el tipo de ventana en que se abrirá el link.
4- Hacer click en el botón + para agregarlo a ...
5- La lista que aparece en el espacio inferior, donde se listarán los botones y sus respectivos links.

Luego de estos pasos presionamos el botón Siguiente (Next).
En la siguiente ventana nos encontramos con las opciones para definir los aspectos gráficos del botón, tales como fuente, tamaño de fuente, colores de las distintas instancias del botón, etc. Al terminar de definirlas, presionamos Finalizar (Finish), y tendremos el primer botón de nuestro submenú.
A medida que vayamos agregando los botones, estos irán listándose, tal cual como los vemos en esta ventana. Obviamente, TODOS los botones del submenú pueden crearse en la primera ventana de una vez, y recién ahí pasar a definir sus cualidades gráficas. Y así con cada uno de los botones principales: todos ellos pueden tener submenúes, según haga falta.

Cuando finalizamos de crear todos los botones de los submenúes, volvemos al lienzo y nos encontramos con esta visualización. Nótese que los botones aparecen separados del menú principal. Pues bien, nosotros debemos acercarlos manualmente así que, simplemente lo pinchamos con el mouse, y sin soltar, lo movemos hasta el lugar que querramos.
Para exportar, obviamente, lo esportamos como HTML.

Probamos, como siempre, con F12 para ver cómo se ve en el explorador, y notemos lo siguiente:

1- El submenú aparece normalmente al poner el mouse en el Botón 1.
2- El menú entero aparece posicionado arriba, a la izquierda del explorador.

Esto sucede porque esa es la posición POR DEFECTO que le asigna el explorador a este tipo de menúes hechos en Fireworks. Y esto es un factor muy importante a tener en cuenta cuando insertamos estas botoneras en documentos html.

En este ejemplo la pusimos a la izquierda, pero fíjense dónde aparece el submenú. Esto se debe a esa especie de "predestinación" que tiene el explorador para este tipo de menúes.

Cuál es la solución? Pues diseñar en bloque.
Si su botonera va a estar acompañada de títulos y/o gráficos por arriba o por abajo, estos deben ser diseñados en Fireworks junto con la botonera.
En este link de prueba lo hemos hecho así.

Se pueden presentar otros inconvenientes menores, pero ninguno que no tenga solución. De todos modos, no dude en escribirme y trataré de resolver sus dudas.

Importación con zonas de división:

"La división de imágenes tiene las ventajas siguientes:

- Puede optimizarse cada parte de la imagen por separado, con lo que se obtienen archivos más pequeños y fáciles de descargar.

- Pueden exportarse algunas partes de la imagen como archivo GIF y otras como JPEG, con lo que se utiliza lo mejor de cada formato de exportación.

- Pueden designarse páginas para utilizar algunos de sus elementos gráficos en todas las páginas y cambiar sólo las divisiones que tienen contenidos exclusivos, lo que proporciona velocidad al sitio Web. Además, se puede editar y reemplazar un elemento gráfico de una división sin tener que volver a descargar todas las divisiones de una imagen.

- Pueden crearse rollovers con divisiones".(Manual de Macromedia)

Vamos a tomar como ejemplo una imagen ya optimizada que pesa 40,7 Kb. Tomemos en cuenta que la medida de peso ideal para un HTML, con imágenes y todo, es de 50 Kb. Por tanto nos encontramos ante una imagen realmente "pesada". Si a esto le sumamos que, en este ejemplo, NO QUEREMOS bajarle la calidad, tenemos en manos un problema, pues el el HTML que contenga esta foto va a tardar en bajar, y no queremos que el usuario se canse de esperar y cambie de página.
La única opción que nos queda es dividir la imagen, para que baje por partes, y el usuario no tenga que esperar a que baje completamente para empezar a ver algo. Para esta operación de división utilizamos la herramienta División , y en este caso nos ayudaremos con las guías para dividir la imagen en varias partes.
Una vez hecho, definimos las divisiones de acuerdo a las que ya definieron las guías, con la herramienta dividir. Las divisiones nos quedarán con una "máscara" verde. Cada una de estas zonas definidas será una imagen cuando se exporte todo como un HTML. En la imagen se pueden ver las divisiones y una de ellas seleccionada. Si nos fijáramos en la vista previa mientras la mantenemos seleccionada, podríamos ver que esa imagen pesa 5,28 Kb. Ese es el peso aproximado de cada una de las divisiones.
El próximo paso es la exportación. Debemos fijarnos que estés seleccionadas todas las zonas de división, y también que estén seleccionadas las opciones correctas:
1- Que utilice las áreas de división.
2- Que utilice el mismo programa de diseño web que utilizaremos para construir nuestra página. En este caso, Dreamweaver.

Hay que mencionar dos puntos más a propósito de las divisiones:
1- Existe la herramienta de División poligonal , en caso que las divisiones no sean exactamente cuadrangulares.
2- Las zonas poligonales pueden actuar como zonas interactivas, en el sentido que se les puede asignar también vínculos URL.

 

Rollovers simples:

Los botones tienen como una de sus características principales la posibilidad de vincular direcciones URL, ya que incluyen una zona interactiva especialmente para estos casos. Pro esta zona interactiva, por defecto e invariablemente, mantiene una forma rectangular. De modo que, si yo deseo que el botón realice un rollover de color o imagen, la otra forma o imagen a utilizar, deberá tener también esta forma.
Qué pasa en los casos en que necesito un botón circular con algún efecto? Recurro a la creación de un rollover simple.

Para esto debemos tener, en primer lugar, las dos imágenes que actuaran cada una en un FRAME distinto. Luego, posicionados en el frame que mostrará la imagen por defecto del rollover, voy a Ventana>Comportamiento (behaviors). Enseguida el programa nos preguntará si queremos aplicar el rollover 1) A toda la imagen o 2) A sólo una parte. Como el rollover que estamos armando es uno simple, elegimos la opción 1

A continuación cliqueamos en el signo "+" de la misma ventana, y nos pasará a mostrar la acción que queremos que realice.
Por defecto, nos marcará el evento "Mouse Over", que es cuando el mouse está sobre la imagen. Es entonces cuando se ejecutará el rollover.